<template>
    <basic-container>

      <template>
          <el-container>
            <el-main>
              <el-form ref="form" :model="form" label-width="120px" :rules="rules">
                <el-form-item label=" 产品工艺：" prop="productProcessId" >
                  <el-select v-model="form.productProcessId" placeholder="请选择产品工艺"  multiple filterable  style="width:100%;">
                    <el-option
                      v-for="item in craftProductList"
                      :key="item.id"
                      :label="`【产品类型：`+item.productLineType + `】【产品工艺：`+item.productProcessName+`】【品号：`+item.articleNumber+`】` "
                      :value="item.id">
                      <span style="color: #5e80a6; font-size: 13px">产品类型：{{ item.productLineType }}</span>
                      <span style="float: left">产品工艺：{{ item.productProcessName }}</span>
                      <span style=" color: #5e80a6; font-size: 13px">品号：{{ item.articleNumber }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="产线名称："  prop="realityLineName" >
                  <avue-input v-model="form.realityLineName"  placeholder="请输入产线名称" ></avue-input>
                </el-form-item>
                <div style="margin-top: 35px;text-align: -webkit-center">
                    <el-button type="primary" @click="saveLine">保存</el-button>
                    <el-button @click="function(){$emit('closeAddReality');}">取消</el-button>
                </div>
              </el-form>
            </el-main>
          </el-container>
      </template>


      <template>
      </template>
    </basic-container>
</template>

<script>
    import {getCraftLineAndDetailsList} from '@/api/pfoc/craftproductline'
    import {saveRealityLine} from '@/api/pfoc/realityproductline'
    /**引入设备下拉框*/
    import deviceSelect from '@/views/pfoc/realityproductline/custom-select'
    export default {
        name: "add-reality-line",
        props:{
            productLineTypeList:{//产线类型集合
                type:Array
            }
        },
        components: {
            //设备下拉框
            deviceSelect,
        },
         data() {
            return {
                craftProductList:[],//产品工艺集合
                form:{
                    realityLineName:null,//实际产线名称
                    productProcessId:[],//产品工艺ID集合
                },
                rules: {
                    realityLineName: [
                        { required: true, message: '请输入产线名称', trigger: 'blur' },
                    ],
                    productProcessId: [
                        { type: 'array', required: true, message: '请至少选择一个产品工艺',trigger: ['blur', 'change']}
                    ]
                }

            };
        },
        created() {
        },
        computed: {

        },
        mounted() {
            //获取所有配置好的工艺产线及其对应工艺工序详情数据集合
            this.getCraftLineAndDetailsListData();

        },
        methods: {
            //获取所有配置好的工艺产线及其对应工艺工序详情数据集合
            getCraftLineAndDetailsListData(){
                getCraftLineAndDetailsList().then(response => {
                    this.craftProductList=response.data.data;
                    // console.log(this.pfocProcessList)
                })

            },

            //保存工艺产线
            saveLine(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        var data={
                            realityLineName:this.form.realityLineName,
                            productProcessIdArr:this.form.productProcessId
                        }
                        //提交
                        saveRealityLine(data).then(response => {
                            if(response.data.data.length>0) {
                                this.$message.warning(
                                    {
                                        message: "保存成功，其中产品工艺——品号："+response.data.data+"等与当前真实产线已绑定，已忽略重复添加",
                                        duration: 5000 // 设置时长为5秒
                                    });
                            }else{
                                this.$message.success("保存成功。")
                            }
                            this.$emit('closeAddReality');//关闭新增页面
                        });

                    } else {
                        return false;
                    }
                });

            },
            handleClick (node) {
                this.$message.success(JSON.stringify(node))
            },
            handleNext () {
                this.count++
                if (this.count >= this.nodeList.length) {
                    this.count = 0;
                }
                this.flowForm = this.nodeList[this.count].id;
            },
            viewShunxu(){
                this.$message.success(JSON.stringify(this.option.lineList))
                /*this.$message.success(JSON.stringify(this.option.nodeList))*/
            },

            handleSelectData(obj){
                this.form[obj.nodeId+"_"+obj.attributeField] = obj.deviceSn;
                this.$set(this.form,obj.nodeId+"_"+obj.attributeField + "Name", obj.deviceName);//注册动态节点-设备名称
                // console.log(this.form)
            },
        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }
</style>
